<template>
  <div class="login-container">
    <div class="form-container">
      <el-tabs v-model="activeName" stretch>
        <el-tab-pane label="登录" name="first">
          <el-form :model="loginForm" ref="loginForm" :rules="loginRules" class="login-form">
            <el-form-item prop="username">
              <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="login">登录</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="注册" name="second">
          <el-form :model="registerForm" ref="loginForm" :rules="registerRules" class="login-form">
            <el-form-item prop="username">
              <el-input v-model="registerForm.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" v-model="registerForm.password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item prop="mail">
              <el-input type="email" v-model="registerForm.email" placeholder="邮箱"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="register">注册</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      activeName: 'first',
      loginForm: {
        username: '',
        password: ''
      },
      registerForm: {
        username: '',
        password: '',
        email: ''
      },
      loginRules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ]
      },
      registerRules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        mail: [
          {required: true, message: '请输入邮箱', trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    login() {
      axios.get('http://localhost:8077/tourism/www/user/login', {
        params: {
          username: this.loginForm.username,
          password: this.loginForm.password,
          // 添加其他参数
        },
      }).then(response => {
        if (response.data.code !== 200) {
          this.$message.error(response.data.msg);
        } else {
          this.$message({
            message: response.data.msg,
            type: 'success'
          });
          console.log(response.data)
          const username = response.data.data;
          this.$store.dispatch('login', { username: username })
          this.$router.push('/test');
        }
      })
          .catch(error => {
            console.error('Error during login:', error);
          });
    },
    register() {
      const userData = this.registerForm;
      axios.post('http://localhost:8077/tourism/www/user/register', userData)
          .then(response => {
            if (response.data.code !== 200) {
              this.$message.error(response.data.msg);
            } else {
              this.loginForm.username = this.registerForm.username;
              this.loginForm.password = this.registerForm.password;
              this.login()
            }
          })
          .catch(error => {
            // 处理错误
            console.error('Error during register:', error);
          });
    }
  }
};
</script>

<style scoped>
.login-container {
  background: url('@/assets/login/login-main.jpg') center center no-repeat;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center; /* 将内容推到右侧 */
}

.login-form {
  width: 400px;
  background: rgba(255, 255, 255, 0);
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0);
}

.rounded-input {
  border-radius: 20px; /* 调整输入框的左右圆角大小 */
}

.rounded-button {
  border-radius: 20px; /* 调整按钮的左右圆角大小 */
}

/* 使 el-input 透明 */
::v-deep .el-input__inner {
  //background-color: rgba(255, 255, 255, 0.5) !important;
  //border-radius: 20px; /* 调整输入框的左右圆角大小 */
}

.form-container {
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
  display: flex;
  align-items: center;
  justify-content: center;
}

::v-deep .el-input__inner {
  border: none; /* 移除四边框 */
  border-bottom: 1px solid #ccc; /* 只保留下边框 */
  background-color: transparent !important; /* 设置透明背景 */
  border-radius: 0;
  box-shadow: none; /* 移除阴影效果，根据需要添加或删除 */

}

::v-deep .el-button {
  width: 200px;
  background: red;
  color: #cccccc;
  border: 1px solid red;
}

/* 自定义选中标签的样式 */
::v-deep .el-tabs__item.is-active {
  color: red; /* 选中标签的字体颜色 */
}

::v-deep .el-tabs__item:hover {
  color: red; /* 鼠标悬停时的字体颜色 */
}

::v-deep .el-tabs__item {
  color: #ccc; /* 鼠标悬停时的字体颜色 */
}

::v-deep .el-tabs__active-bar {
  background-color: green; /* 下划线的颜色 */
}

/* Responsive design */
@media (max-width: 600px) {
  .login-container {
    background-size: auto 100%;
  }
}
</style>
